<template>
  <div class="myzone_index">
    <Backbar title="我的"></Backbar>
    <div class="myzone_content">
      <!-- 头 -->
      <div class="myzone_info clear">
        <img src="../images/slider-pic/slider-pic11.jpeg" alt="">
        <div class="myzone_uid">
          <h3 v-show="this.global.isLogin === false"><router-link style="color: white" to="/login">点击登录</router-link></h3>
          <h3>{{this.global.username}}</h3>
          <p v-show="this.global.isLogin">{{getPhone}}</p>
        </div>
      </div>
    </div>
    <!-- 3分 -->
    <!--<div class="three_lan">-->
      <!--<a class="three_lan_">-->
        <!--<p class="big_colorful">-->
          <!--<span class="index-2FmrF_0" style="color: rgb(255, 153, 0);">0.00</span><span class="index-2V-Hh_0">元</span>-->
        <!--</p>-->
        <!--<p class="index-3S6cZ_0">余额</p>-->
      <!--</a>-->
      <!--<a class="three_lan_" style="border-left: 1px solid #ddd;border-right: 1px solid #ddd;">-->
        <!--<p class="big_colorful">-->
          <!--<span class="index-2FmrF_0" style="color: rgb(255, 95, 62);">3</span><span class="index-2V-Hh_0">个</span>-->
        <!--</p>-->
        <!--<p class="index-3S6cZ_0">优惠</p>-->
      <!--</a>-->
      <!--<a class="three_lan_">-->
        <!--<p class="big_colorful">-->
          <!--<span class="index-2FmrF_0" style="color: rgb(106, 194, 11);">6250</span><span class="index-2V-Hh_0">分</span>-->
        <!--</p>-->
        <!--<p class="index-3S6cZ_0">积分</p>-->
      <!--</a>-->
    <!--</div>-->
    <!-- 栏 -->
    <router-link to="/orderlist">
      <div class="some_bar first-c">
        <svg aria-hidden="true">
          <use xlink:href="#icon-dingdan"></use>
        </svg>
        <span class="v-md">历史订单</span>
      </div>
    </router-link>
    <router-link to="/mybooking">
    <div class="some_bar">
      <svg class="v-md">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shop"></use>
      </svg>
      <span class="v-md">我的订桌</span>
    </div>
    </router-link>
    <a>
    <div class="some_bar" @click="queue">
      <svg aria-hidden="true">
        <use xlink:href="#icon-paiduijiaohao"></use>
      </svg>
      <span class="v-md">我的排队</span>
    </div>
    </a>
    <div class="some_bar first-c">
      <svg class="v-md">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#discover.5811137"></use>
      </svg>
      <span class="v-md">服务中心</span>
    </div>
    <div class="some_bar">
      <svg class="v-md">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#index.18edf5a"></use>
      </svg>
      <span class="v-md">关于</span>
    </div>
    <div class="some_bar first-c" @click="out" v-show="this.global.isLogin">
      <svg class="v-md">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#discover.5811137"></use>
      </svg>
      <span class="v-md">退出登录</span>
    </div>
    <!-- 弹出层 -->
    <section class="alert_box" v-if="alertBoxShow">
      <header>提示</header>
      <div class="con_info">
        是否退出登录?
      </div>
      <footer>
        <div class="double_btn" @click="alertBoxShow = false"><font color="#4cd964">取消</font></div>
        <div class="double_btn" @click="signOut">确认</div>
      </footer>
    </section>
    <Fixednav></Fixednav>
  </div>
</template>

<script>
import Backbar from './small_components/Back_bar';
import Fixednav from './small_components/Fixed_nav';
export default {
  name: 'myzone',
  data () {
    return {
      uname: '',
      alertBoxShow: false
    };
  },
  mounted () {
    // if (!this.isLogin) {
    //   this.$router.replace('/login');
    // } else {
    //   this.uname = this.$store.getters.getuname;
    //   // 设置当前标记为我的
    //   this.$store.dispatch('setWhichpage', 'myzone');
    // }
  },
  created () {
    this.$store.dispatch('setLoading', false);
    this.global.whichPage = 'myzone';
  },
  computed: {
    getPhone () {
      return this.global.phone.substr(0, 3) + '****' + this.global.phone.substr(7, 11);
    },
    isLogin () {
      return this.$store.getters.getLogin;
    }
  },
  methods: {
    // 我的排队
    queue () {
      this.$http
        .post(
          this.global.url + 'pos/line_up?imei=' + this.global.imei + '&paidui=0&pos_user_id=' + this.global.userid,
          {},
        {
          emulateJSON: true,
          header: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        )
        .then(
          response => {
            response = response.data;
            if (response.index !== -1) {
              this.$router.push({ name: 'queue', params: { store_id: response.belonged_to_id, store_img: 'data:image/png;base64,' + response.image_icon, store_name: response.store_name, isQueue: true, indexs: response.index, queueNum: response.name } });
            } else {
              this.$router.push('/demo');
            }
          },
          response => {
            // error callback
            console.log(response.data);
          }
        );
    },
    out () {
      this.alertBoxShow = true;
    },
    signOut () {
      // 退出登录
      this.$http
        .get(
          this.global.url + 'pos/logout?imei=' + this.global.imei + '&pos_user_id=' + this.global.userid,
          {},
        {
          emulateJSON: true,
          header: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        )
        .then(response => {
          response = response.body;
          if (response.code === 1) {
            this.global.isLogin = false;
            this.global.userid = '';
            this.global.phone = '';
            this.global.username = '';
            let userAgent = navigator.userAgent;
            if (userAgent.indexOf('Firefox') !== -1 || userAgent.indexOf('Chrome') !== -1) {
              window.location.href = '';
            } else if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1) {
              window.opener = null; window.open('', '_self', '').close();
            } else {
              window.opener = null;
              window.open('', '_self');
              window.close();
              this.$router.push('/');
            }
          }
        });
    }
  },
  components: {
    Fixednav,
    Backbar
  }
};
</script>

<style lang="less" scoped>
.myzone_content{
  width:10rem;
  height:3rem;
  margin-top:1rem;
  padding: .6rem 1rem;
  box-sizing:border-box;
  background:#0097ff;
  img{
    width:1.4rem;
    height:1.4rem;
    border-radius:50%;float: left;
  }
  .myzone_uid{
    float: left;
    margin-left:1rem;
    color:#fff;
    h3{
      font-size:.7rem;
    }
    p{
      font-size:.4rem;
    }
  }
}
.three_lan{
  display: table;
  width: 100%;
  height: 2.24rem;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  .three_lan_{
    display: table-cell;
    width: 33.3333%;
    vertical-align: middle;
    text-align: center;
    p.big_colorful{
      line-height:.4rem;
    }
    .index-2FmrF_0 {
        padding: .4rem 0 0;
        font-size: .6rem;
        line-height: .6rem;
        font-weight: 700;
    }
    .index-2V-Hh_0 {
        font-size: .32rem;
        line-height: .32rem;
    }
    .index-3S6cZ_0 {
        font-size: .32rem;
        line-height: .37rem;
        font-weight: 500;
        color: #666;
    }

  }
}
div.some_bar{
  width: 10rem;
  height: 1.1rem;
  padding: 0 .4rem;
  box-sizing: border-box;
  background:#fff;
  font-size:.4rem;
  line-height:1.1rem;
  border-top:1px solid #dedede;
  text-align: left !important;
  &.first-c{
    margin-top: .3rem;
    boeder:none;
  }
  svg{
    width: .4rem;
    height: .4rem;
  }
  span{
    margin-left:.2rem;
  }
}
.alert_box{
  width: 8rem;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
  font-size: .4rem;
  z-index: 10;
  border-radius:.14rem;
  overflow:hidden;
  text-align: center;
  header{
    font-size: .45rem;
    padding:.3rem;
  }
  .con_info{
    height: 3rem;
    line-height:2rem;
    border-top: .025rem solid #eee;
    border-bottom: .025rem solid #eee;
  }
  footer{
    height: 1.3rem;
    .double_btn{
      width: 50%;
      height: 1.3rem;
      float:left;
      line-height:1.3rem;
      &:nth-of-type(2){
        background:#4cd964;
        color:#fff;
      }
    }
  }
}
</style>
